<template>
	<a-modal title="订单详情" :width="800" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk"
		@cancel="handleCancel" cancelText="关闭" wrapClassName="ant-modal-cust-warp"
		style="top: 5%; height: 85%; overflow-y: hidden" :footer=null>

		<a-card :bordered="false">
			<a-steps class="steps" :current="currentTab">
				<a-step title="确认订单信息" />
				<a-step title="编辑订单" />
				<a-step title="完成" />
			</a-steps>
			<div class="content">

				<div v-if="currentTab === 0">
					<a-form style="max-width: 500px; margin: 40px auto 0;" ref="form" :model="model">
						<a-form-item label="活动名称" :labelCol="{span: 5}" :wrapperCol="{span: 19}" prop="title">
							<span>{{model.title}}</span>
						</a-form-item>
						<a-form-item label="参加人姓名" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
							<a-input v-model="model.name" />
						</a-form-item>
						<a-form-item label="手机号" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
							<a-input v-model="model.phone" />
						</a-form-item>
						<a-form-item label="身份证号" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
							<a-input v-model="model.idCard" />
						</a-form-item>
						<a-form-item label="预约日期" :labelCol="{span: 5}" :wrapperCol="{span: 19}">
							<j-date v-model="model.appointTime" :showTime="true" dateFormat="YYYY-MM-DD" />

						</a-form-item>
						<a-form-item :wrapperCol="{span: 19, offset: 5}">
							<a-button type="primary" @click="nextStep">下一步</a-button>
						</a-form-item>
					</a-form>
				</div>

				<div v-if="currentTab === 1">
					<a-form style="max-width: 500px; margin: 40px auto 0;">
						<a-alert :closable="true" message="操作此订单后，新动力将短信通知对方！" style="margin-bottom: 24px;" />
						<a-form-item label="基地" :labelCol="{span: 5}" :wrapperCol="{span: 19}" class="stepFormText">
							{{model.shopName}}
						</a-form-item>
						<a-form-item label="订单编号" :labelCol="{span: 5}" :wrapperCol="{span: 19}" class="stepFormText">
							{{model.orderSn}}
						</a-form-item>

						<a-form-item label="订单状态" :labelCol="{span: 5}" :wrapperCol="{span: 19}" class="stepFormText">
							<!-- <a-select defaultValue="alipay">
								<a-select-option value="alipay">支付宝</a-select-option>
								<a-select-option value="wexinpay">微信</a-select-option>
							</a-select> -->

						<a-select v-model="model.status" placeholder="订单状态" :getPopupContainer= "(target) => target.parentNode">
							<a-select-option v-for="(item, index) in orderOptions" :key="index.toString()" :value="item.value">
							{{ item.label }}
							</a-select-option>
						</a-select>		
						</a-form-item>
						<a-form-item :wrapperCol="{span: 19, offset: 5}">
							<a-button :loading="loading" type="primary" @click="submit()">提交</a-button>
							<a-button style="margin-left: 8px" @click="prevStep">上一步</a-button>
						</a-form-item>
					</a-form>
				</div>

				<div v-if="currentTab === 2">
					<a-form style="margin: 40px auto 0;">
						<result title="操作成功" :is-success="true" description="预计两小时内短信通知对方">
							<div class="information">
								<a-row>
									<a-col :sm="8" :xs="24">订单编号：</a-col>
									<a-col :sm="16" :xs="24">{{model.orderSn}}</a-col>
								</a-row>
								<a-row>
									<a-col :sm="8" :xs="24">活动信息：</a-col>
									<a-col :sm="16" :xs="24">{{model.title}}</a-col>
								</a-row>
								<a-row>
									<a-col :sm="8" :xs="24">参加人姓名：</a-col>
									<a-col :sm="16" :xs="24">{{model.name}}</a-col>
								</a-row>
								<a-row>
									<a-col :sm="8" :xs="24">手机号：</a-col>
									<a-col :sm="16" :xs="24">{{model.phone}}</a-col>
								</a-row>
								<a-row>
									<a-col :sm="8" :xs="24">订单状态：</a-col>
									<a-col :sm="16" :xs="24"><span class="money">{{coverStatus(model.status)}}</span></a-col>
								</a-row>
							</div>
							<div slot="action">
								<a-button type="primary" @click="finish">完成</a-button>
							</div>
						</result>
					</a-form>
				</div>
			</div>
		</a-card>

	</a-modal>

</template>

<script>
	import Result from '../../result/Result'
	import {ajaxGetDictItems,updateOrder,getDict } from '@/api/api'
	export default {
		name: "StepForm",
		components: {
			Result
		},
		data() {
			return {
				description: 'xdl活动订单分步操作。',
				currentTab: 0,
				visible: false,
				orderOptions:[],
				confirmLoading: false,
				model: {},
				loading: false,
				// form
				form: null,
			}
		},
		created() {
			//备份model原始值
			this.modelDefault = JSON.parse(JSON.stringify(this.model));
			this.getDictItem();
		},
		methods: {
			getDictItem() {
				//根据字典Code, 初始化字典数组
				ajaxGetDictItems('order_status', null).then((res) => {
					if (res.code === 20000) {
					this.orderOptions = res.data;
					}
				})
			},
			add() {
				this.visible = true
				this.edit(this.modelDefault)
			},
			edit(record) {
				this.model = Object.assign({}, this.defaultModel, record);
				this.model.status=this.model.status.toString();
				this.visible = true
				this.currentTab = 0;
				console.log('model', this.model);;
			},
			close() {
				this.$emit('close')
				this.visible = false
			},
			coverStatus(v){
			 return	getDict('order_status',v);	
			},
			// handler
			nextStep() {
				if (this.currentTab < 2) {
					this.currentTab += 1
				}
			},
			submit(){
			  let that = this;
			  console.log('this.model',this.model)
			   if(this.model.status!=3){
				   that.$message.warning('订单状态只可做核销操作，可选择“已使用”')
				   return false;
			   }	
              updateOrder(this.model).then((res) => {
				if(res.code===20000){
					that.loading = true
					setTimeout(function () {
					that.currentTab += 1
					that.loading = false
					}, 1500)
				}else{
					that.$message.warning('订单更新失败！')
				}  

			  })
			},
			prevStep() {
				if (this.currentTab > 0) {
					this.currentTab -= 1
				}
			},
			finish() {
				const that = this
				that.$emit('ok')
				this.close()
			},
			toOrderList() {
				this.$router.push('/list/query-list')
			},
			handleCancel() {
				this.close()
			},
			handleOk() {
				const that = this
				const params = that.model;

			}
		}
	}
</script>

<style lang="less" scoped>
	.information {
		line-height: 22px;

		.ant-row:not(:last-child) {
			margin-bottom: 24px;
		}
	}

	.steps {
		max-width: 750px;
		margin: 16px auto;
	}

	.stepFormText {
		margin-bottom: 24px;

		.ant-form-item-label,
		.ant-form-item-control {
			line-height: 22px;
		}
	}

	.money {
		font-family: "Helvetica Neue", sans-serif;
		font-weight: 500;
		font-size: 20px;
		line-height: 14px;
	}
</style>
